<template>
  <div>
    <h3>RefStateDemo</h3>
    <p>ageRef: {{ ageRef }}</p>
    <p>state.name: {{ state.name }}</p>
    <p>state.cases: {{ state.cases }}</p>
  </div>
</template>

<script>
import { ref, reactive, onBeforeUnmount } from "vue";

export default {
  /* 支棱起来以后才能【何以解忧 唯有Vue3】 */
  setup() {
    // 定义一个基本数据类型的响应式数据
    const ageRef = ref(20);
    console.log("ageRef", ageRef);
    console.log("ageRef.value", ageRef.value);

    /* ref响值 reactive响对 */
    const state = reactive({
      name: "OutlawChang",
      cases: 18, //身背十八条电诈案件
    });

    const timer = setInterval(() => {
      console.log("定时器在running...");
      ageRef.value++;

      state.cases++;
    }, 1000);

    /* 卸载前预警一下 */
    onBeforeUnmount(() => {
      console.log("大事不好！组件想跑！");
      clearInterval(timer);
      console.log("定时器业已清除😝~~~");
    });

    // 向模板返回它需要的状态
    return {
      ageRef,
      state,
    };
  },
};
</script>

<style lang="scss" scoped></style>
